<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='chrome=1'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <meta name='mobile-web-app-capable' content='yes'>
    <meta name='apple-mobile-web-app-capable' content='yes'>

    <meta name='twitter:card' content='summary'>
    <meta name='twitter:title' content='WebXR Samples'>
    <meta name='twitter:description' content='Sample WebXR pages for testing and reference'>

    <link rel='icon' type='image/png' sizes='32x32' href='../favicon-32x32.png'>
    <link rel='icon' type='image/png' sizes='96x96' href='../favicon-96x96.png'>

    <link rel='stylesheet' href='../css/stylesheet.css'>
    <link rel='stylesheet' href='../css/pygment_trac.css'>

    <style>
      article {
        position: relative;
        padding: 0.5em;
        background-color: rgba(255, 255, 255, 0.90);
        margin-bottom: 1em;
        border-radius: 3px;
      }

      article h3 {
        font-size: 1.0em;
        margin-top: 0px;
        margin-bottom: 0px;
      }

      article h3::before {
        display: inline-block;
        content: attr(data-index) ' - ';
        font-weight: bold;
        white-space: nowrap;
        margin-right: 0.2em;
      }

      article h4 {
        position: absolute;
        right: 0.5em;
        top: 0.5em;
        margin-top: 0px;
        margin-bottom: 0px;
      }

      article p {
        margin: 0.5em;
      }

      article .links {
        margin-left: 0.5em;
        margin-right: 0.5em;
      }

      article a {
        display: inline-block;
      }

      article a:not(:first-child)::before {
        display: inline-block;
        content: '•';
        font-weight: bold;
        white-space: nowrap;
        margin-left: 0.5em;
        margin-right: 0.5em;
      }

      .github-link {
        font-size: 0.8em;
      }

      .wordmark img {
        width: 70%;
      }
    </style>

    <title>WebXR - WebGPU Samples</title>
  </head>
  <body>

    <div class='container' id='container'>
      <header class='header'>
        <div id='nav'>
            <a href='../'>Samples</a>
            <a href='../layers-samples/'>Layers Samples</a>
            <a href='.'  class='selected'>WebGPU Samples</a>
            <a href='../proposals/'>Proposals</a>
            <a href='../tests/'>Test Pages</a>
            <a href='../report/'>Report</a>
        </div>

        <h1>
          <a href='' class='wordmark'>
            <img src='../media/logo/webxr-logo.svg' alt='WebXR Logo'/>
          </a>
        </h1>
        <h2 class='tagline'>WebGPU Sample Pages</h2>
      </header>

      <main class='main' id='main'>
        <p><b>Does my browser support WebXR with WebGPU?</b><br/>
        <div>
          <img id='canhazimg' style='width: 32px; float: left;'></img>
          <p id='canhazwebxr' style='margin-left: 48px;'></p>
        </div>
        <script>
          let canhazElement = document.getElementById('canhazwebxr');
          let canhazImg = document.getElementById('canhazimg');
          if ('xr' in navigator) {
            if ('gpu' in navigator) {
              if ('XRGPUBinding' in window) {
                canhazElement.innerText = "Yes! Your browser supports WebXR with WebGPU!"
                navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
                  const span = document.createElement('span');
                  span.innerText = supported ? '✔️- VR support detected' : '❌ - VR support not detected';
                  canhazElement.appendChild(document.createElement('br'));
                  canhazElement.appendChild(span);
                });
                navigator.xr.isSessionSupported('immersive-ar').then((supported) => {
                  const span = document.createElement('span');
                  span.innerText = supported ? '✔️- AR support detected' : '❌ - AR support not detected';
                  canhazElement.appendChild(document.createElement('br'));
                  canhazElement.appendChild(span);
                });
                canhazImg.src = "../media/textures/check-button.png";
              } else {
                canhazElement.innerText = "Your browser supports WebXR and WebGPU, but does not support the necessary feature to display WebGPU content in WebXR. However you can still run WebXR experiences built with WebGL!"
                canhazImg.src = "../media/textures/info-button.png";
              }
            } else {
              canhazElement.innerText = "Your browser supports WebXR but not WebGPU. However you can still run WebXR experiences built with WebGL!"
              canhazImg.src = "../media/textures/info-button.png";
            }
          } else {
            canhazElement.innerText = "Sorry, your browser does not support WebXR."
            canhazImg.src = "../media/textures/x-button.png";
          }
        </script>

        <p><b>Sample pages demonstrating how to use various aspects of the WebXR API with WebGPU.</b><br/>

        <script>
          let pages = [
            { title: 'Barebones VR', category: 'No Dependencies',
              path: 'vr-barebones.html',
              description: 'Extremely simple use of "immersive-vr" sessions with no library dependencies. Doesn\'t render anything exciting.',
              noPolyfill: true },
            { title: 'Barebones AR', category: 'No Dependencies',
              path: 'ar-barebones.html',
              description: 'Extremely simple use of "immersive-ar" sessions with no library dependencies. Doesn\'t render anything exciting.',
              noPolyfill: true },
          ];

          let mainElement = document.getElementById("main");

          // Append an element for every item in the pages list.
          let pageIndex = 0;
          for (var i = 0; i < pages.length; ++i) {
            var page = pages[i];

            if (page.tag) {
              mainElement.appendChild(document.createElement(page.tag));
              continue;
            } else {
              pageIndex++;
            }

            let article = document.createElement('article');

            let title = document.createElement('h3');
            title.setAttribute('data-index', pageIndex);

            let titleLink = document.createElement('a');
            titleLink.href = page.path;
            titleLink.textContent = page.title;
            title.appendChild(titleLink);
            article.appendChild(title);

            let category = document.createElement('h4');
            category.textContent = page.category;
            article.appendChild(category);

            let description = document.createElement('p');
            description.textContent = page.description;
            article.appendChild(description);

            let links = document.createElement('div');
            links.classList.add('links');

            let sourceLink = document.createElement('a');
            sourceLink.href = 'https://github.com/immersive-web/webxr-samples/blob/main' + page.path;
            sourceLink.textContent = 'Source';
            links.appendChild(sourceLink);

            if (!page.noPolyfill) {
              let polyfillLink = document.createElement('a');
              polyfillLink.href = page.path + '?usePolyfill=0';
              polyfillLink.textContent = 'Run Without Polyfill';
              links.appendChild(polyfillLink);
            }

            article.appendChild(links);

            mainElement.appendChild(article);
          }
        </script>
      </main>

      <p>Models used in these samples come from <a href="https://poly.google.com">Poly</a>, and many were modeled in <a href="https://vr.google.com/blocks/">Blocks</a>.<br/>
      They are stored and loaded using the <a href="https://www.khronos.org/gltf/">glTF 2.0 format</a>.<br/>
      Attribution for individual models can be found under the <a href="https://github.com/immersive-web/webxr-samples/tree/main/media/gltf">media/gltf</a> folders for this repository.</p>

      <h3><a class='github-link' href='https://github.com/immersive-web/webxr-samples'>View samples source on GitHub</a></h3>

      <footer class='footer'>
      </footer>
    </div>
  </body>
</html>
